<#include '/pages/taglib/core.ftl'>
<#include "/pages/taglib/common.ftl">

<@script src="/static/espirit/scripts/jquery.ztree.all-3.1.js"/>
<@css src="/static/espirit/styles/zTreeStyle/zTreeStyle.css"/>

<style type="text/css">
	.ztree li button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
	.ztree li a input.rename {width: 200px;height: 20px;}
</style>

<script>
	var setting = {
		view: {
			addHoverDom: addHoverDom,
			removeHoverDom: removeHoverDom,
			selectedMulti: false
		},
		edit: {
			enable: true,
			editNameSelectAll: true,
			removeTitle:'${action.getText("action.delete")}',
			renameTitle:'${action.getText("action.update")}'
		},
		data: {
			simpleData: {
				enable:true,
				idKey: "id",
				pIdKey: "pId",
				rootPId: ""
			}
		},
		callback: {
			beforeEditName: beforeEditName,
			onRemove: onRemove,
			onRename: onRename,
			onClick: onClick,
			beforeDrag: function() {
				return false;
			}
		}
	};
	
	var zNodes =[
	    <#if (execute.data)??>
		<#list execute.data as item>
			<#assign pId = fn.val(item, 'parentId')!0>
			<#if item_index!=0>,</#if>{id:${item.id}, pId:${pId}, name: "${item.name}"<#if pId=0>, isParent:true</#if>}
		</#list>
		</#if>
	];
	function addHoverDom(treeId, treeNode) {
		if (treeNode.editNameFlag || $("#addBtn_"+treeNode.id).length>0) return;
		var sObj = $("#" + treeNode.tId + "_span");
		if (treeNode.isParent) {
			$('#' + treeNode.tId + '_remove').hide();
		}
		var addStr = "<button type='button' class='add' id='addBtn_" + treeNode.id
			+ "' title='${action.getText("action.add")}' onfocus='this.blur();'></button>";
		sObj.append(addStr);
		var btn = $("#addBtn_"+treeNode.id);
		if (btn) btn.bind("click", function(){
			$.ajax({
				url:'${fn.link('/espirit/eap/manager/department.add.html')}',
				data:{
					'_resultCode':'$json',
					'model.name':'${action.getText("model.department.newDepart")}',
					'model.parentId':treeNode.id
					//'properties':'id'
				},
				dataType:'json',
				success:function(data) {
					var zTree = $.fn.zTree.getZTreeObj(treeId);
					zTree.addNodes(treeNode, {id:data.id, pId:treeNode.id, name:"${action.getText("model.espirit.department.newDepart")}"});
					var newNode = zTree.getNodeByParam("id", data.id);
					zTree.selectNode(newNode);
					zTree.editName(newNode);
				},
				error:function() {
					$('#errorInfo').html('${action.getText("errors.db.dupDepartName")}');
				}
			});
			return false;
		});
	}
	function onClick(e, treeId, treeNode) {
		$('#memberList').load('${fn.link('/espirit/eap/sa/employee.searchInDepartment.html')}?model.id=' + treeNode.id);
	}
	function removeHoverDom(treeId, treeNode) {
		$("#addBtn_"+treeNode.id).unbind().remove();
	}
	function onRemove(e, treeId, treeNode) {
		$.ajax('${fn.link('/espirit/eap/manager/department.deleteList.html')}?_resultCode=$json&results[0].id=' + treeNode.id);
	}
	var oldTreeNodeValue;
	function beforeEditName(treeId, treeNode) {
		oldTreeNodeValue = treeNode.name;
	}
	function onRename(e, treeId, treeNode) {
		if (treeNode.name==oldTreeNodeValue) {
			return;
		}
		$.ajax({
			url:'${fn.link('/espirit/eap/manager/department.update.html')}',
			data:{
				'_resultCode':'$json',
				'model.id':treeNode.id,
				'model.name':treeNode.name
			}
		});
	}
	when('$.fn.zTree', function(){
		var zTreeObj = $.fn.zTree.init( $("#departmentTree"), setting, zNodes);
		zTreeObj.expandAll(false);
	});
</script>

<div id="departmentTree" class="ztree" style="overflow:auto;"></div>
<div id="memberList" style="">
	
</div>
<div id="errorInfo"></div>